<template>
  <div>
    <el-card class="box-card" style="height: 70px ">
      <el-col :span="8" class="right">
        <el-button type="primary" size="small" @click="handleAdd()">新增商品</el-button>
      </el-col>

      <el-col :span="16" class="right">
        <el-input
          placeholder="搜索账户名称"
          prefix-icon="el-icon-search"
          v-model="input1"
          style="width: 300px;"
          size="small"
          clearable
        >
        </el-input>
        <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>

      </el-col>
    </el-card>


    <el-card class="box-card" style="margin-top: 10px; height:600px ">
      <el-col :span="6">
        <el-card class="box-card" style="margin-right: 5px">

          <el-tree
            :data="tree"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            :render-content="renderContent">
            <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
            </span>
          </el-tree>

        </el-card>
      </el-col>

      <el-col :span="18">
        <el-card class="box-card">

          <el-table
            :data="responseData.records"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="auto">
              <!--    <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.date }}</span>
                  </template>-->
            </el-table-column>

            <el-table-column
              prop="serialNumber"
              label="编号"
              width="auto">
            </el-table-column>

            <el-table-column
              prop="name"
              label="名称"
              width="auto">
            </el-table-column>

            <el-table-column
              prop="specification"
              label="规格"
              width="auto">
            </el-table-column>

            <el-table-column
              prop="unit"
              label="单位"
              width="70px">
            </el-table-column>

            <el-table-column
              prop="retailPrice"
              label="零售价"
              width="auto">
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--      :total="responseData.total"-->
          <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            style="margin-top:20px"

            :total="responseData.total"
            :page-size="responseData.size"
            :page-count="responseData.pages"
            :current-page="responseData.current"
            page-sizes="[10, 20, 30, 40, 50, 100]"
          >
          </el-pagination>
        </el-card>
      </el-col>

    </el-card>

    <!--   新增商品单位 -->
    <el-dialog
      title="新增商品"
      :visible.sync="addDialogVisible"
      width="80%"
      :show-close="false"
      :close-on-click-modal="false"
      :before-close="handleClose">


      <!--基本信息-->
      <el-card shadow="never" style="border:none;">

        <el-col span="8">
          <el-card style="width: 300px;" shadow="hover">

            <div slot="header" class="clearfix ">
              <span>基本信息</span>
            </div>

            <label>编号 </label>
            <el-input size="small" class="formInput" v-model="responseData.form.serialNumber"></el-input>
            <br><br>

            <el-label>名称</el-label>
            <el-input size="small" class="formInput" v-model="responseData.form.name"></el-input>

            <br><br>

            <label>分类</label>
            <el-dropdown v-popover:popover4>
              <el-button type="primary" size="mini">
                {{goodsCategoryName}}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>

            </el-dropdown>
            <el-popover
              v-model="goodsCategoryVisible"
              ref="popover4"
              placement="bottom-start"
              width="400"
              trigger="click"
            >
              <el-tree
                :data="tree"
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
                :render-content="renderContent">
            <span class="custom-tree-node" slot-scope="{ node, data }">
            <div @click="selectGoodsCategory(node)">{{ node.label }}</div>
            </span>
              </el-tree>
            </el-popover>

            <br><br>

            <label>单位</label>
            <el-input size="small" class="formInput" v-model="responseData.form.unit"></el-input>

            <br><br>

            <label>规格</label>
            <el-input size="small" class="formInput" v-model="responseData.form.specification"></el-input>
          </el-card>
        </el-col>
        <!--销售价格-->
        <el-col span="8">
          <el-card style="width: 300px" shadow="hover">
            <div slot="header" class="clearfix">
              <span>销售价格</span>
            </div>
            <label>零售价</label>
            <el-input size="small" label="零售价" class="formInput" v-model="responseData.form.retailPrice"></el-input>

            <br><br>

            <label>批发价 </label>
            <el-input size="small" label="批发价" class="formInput" v-model="responseData.form.tradePrice"></el-input>

            <br><br>

            <label>最低销售</label>
            <el-input size="small" label="最低销售" class="formInput"
                      v-model="responseData.form.minimumSellingPrice"></el-input>
          </el-card>
        </el-col>

        <!--其他-->
        <el-col span="5">
          <el-card style="width: 300px" shadow="hover">
            <div slot="header" class="clearfix">
              <span>其他</span>
            </div>
            <label>备注</label>
            <el-input label="备注" v-model="responseData.form.remark" type="textarea"></el-input>
          </el-card>

        </el-col>

        <el-col :span="24">
          <br>
          <br>
          <el-button type="primary" @click="onSubmitAdd()">立即新增</el-button>
          <el-button @click="onCancel()">取消</el-button>
        </el-col>
      </el-card>
    </el-dialog>

    <!--   修改商品单位 -->
    <el-dialog
      title="新增商品单位"
      :visible.sync="updateDialogVisible"
      width="80%"
      :show-close="false"
      :close-on-click-modal="false"
      :before-close="handleClose">


      <!--基本信息-->
      <el-card shadow="never" style="border:none;">

        <el-col span="8">
          <el-card style="width: 300px;" shadow="hover">

            <div slot="header" class="clearfix ">
              <span>基本信息</span>
            </div>

            <label>编号 </label>
            <el-input size="small" class="formInput" v-model="responseData.form.serialNumber"></el-input>
            <br><br>

            <el-label>名称</el-label>
            <el-input size="small" class="formInput" v-model="responseData.form.name"></el-input>

            <br><br>

            <label>分类</label>
            <el-dropdown v-popover:popover4>
              <el-button type="primary" size="mini">
                {{goodsCategoryName}}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>

            </el-dropdown>
            <el-popover
              v-model="goodsCategoryVisible"
              ref="popover4"
              placement="bottom-start"
              width="400"
              trigger="click"
            >
              <el-tree
                :data="tree"
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
                :render-content="renderContent">
            <span class="custom-tree-node" slot-scope="{ node, data }">
            <div @click="selectGoodsCategory(node)">{{ node.label }}</div>
            </span>
              </el-tree>
            </el-popover>

            <br><br>

            <label>单位</label>
            <el-input size="small" class="formInput" v-model="responseData.form.unit"></el-input>

            <br><br>

            <label>规格</label>
            <el-input size="small" class="formInput" v-model="responseData.form.specification"></el-input>
          </el-card>
        </el-col>
        <!--销售价格-->
        <el-col span="8">
          <el-card style="width: 300px" shadow="hover">
            <div slot="header" class="clearfix">
              <span>销售价格</span>
            </div>
            <label>零售价</label>
            <el-input size="small" label="零售价" class="formInput" v-model="responseData.form.retailPrice"></el-input>

            <br><br>

            <label>批发价 </label>
            <el-input size="small" label="批发价" class="formInput" v-model="responseData.form.tradePrice"></el-input>

            <br><br>

            <label>最低销售</label>
            <el-input size="small" label="最低销售" class="formInput"
                      v-model="responseData.form.minimumSellingPrice"></el-input>
          </el-card>
        </el-col>

        <!--其他-->
        <el-col span="5">
          <el-card style="width: 300px" shadow="hover">
            <div slot="header" class="clearfix">
              <span>其他</span>
            </div>
            <label>备注</label>
            <el-input label="备注" v-model="responseData.form.remark" type="textarea"></el-input>
          </el-card>

        </el-col>

        <el-col :span="24">
          <br>
          <br>
          <el-button type="primary" @click="onSubmitUpdate()">立即新增</el-button>
          <el-button @click="onCancel()">取消</el-button>
        </el-col>
      </el-card>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "Goods",
    data() {
      return {
        tree: [],
        //新增商品单位
        addDialogVisible: false,
        //修改
        updateDialogVisible: false,

        //商品分类是否可见
        goodsCategoryVisible: false,

        goodsCategoryName: "点击选择",
        responseData: {
          //列表
          records: [],

          form: {
            id: null,
            serialNumber: "",
            name: "",
            unit: "",
            specification: "1",
            retailPrice: 1,
            tradePrice: 1,
            minimumSellingPrice: 1,
            purchasingCost: 1,
            minimumStock: 1,
            maximumStock: 1,
            status: 1,
            deleted: 0,
            createTime: null,
            goodsCategoryId: null
          },
          total: 0,
          size: 5,
          current: 1,
          orders: [],
          searchCount: true,
          pages: 1
        }
      }
    },
    mounted: function () {
      this.handleSelect();
      this.handleTreeList();

    },
    methods: {

      selectGoodsCategory(node) {
        this.goodsCategoryName = node.label;
        this.responseData.form.goodsCategoryId = node.id;
        this.goodsCategoryVisible = false
      },
      //分类显示
      handleTreeList() {
        this.axios.post('http://localhost:8080/goodsCategory/selectTreeList').then((response) => {
          let data = response.data;
          if (data.code === 200) {
            this.tree = data.data;
          }
        });
      },
      //显示商品列表
      handleSelect() {
        this.axios({
            method: 'post',
            url: 'http://localhost:8080/goods/getList',
            data: {current: this.responseData.current, size: this.responseData.size}
          }
        ).then((response) => {
          let res = response.data;
          if (res.code === 200) {
            this.responseData.total = res.data.total;
            this.responseData.pages = res.data.pages;
            this.responseData.records = res.data.records;
          }
        });
      },
      handleCurrentChange(val) {
        this.axios({
            method: 'post',
            url: 'http://localhost:8080/goods/getList',
            data: {current: val, size: 5}
          }
        ).then((response) => {
          let res = response.data;
          if (res.code === 200) {
            this.responseData.total = res.data.total;
            this.responseData.pages = res.data.pages;
            this.responseData.records = res.data.records;
          }
        });
      },
      // 显示增加弹窗
      handleAdd() {
        this.addDialogVisible = true;
      },
      onSubmitAdd() {
        this.axios({
          method: 'post',
          url: 'http://localhost:8080/goods/insert',
          data: this.responseData.form
        }).then((response) => {
          const data = response.data;
          if (data.code === 200) {
            this.handleSelect();
            this.$message({message: data.message, type: 'success'});
            this.addDialogVisible = false;
          }
        });
      },
      //取消按钮
      onCancel() {
        this.addDialogVisible = false;
        this.updateDialogVisible = false;

      },
      // 删除
      handleDelete(index, row) {

        this.axios.post('http://localhost:8080/goods/deleteById?id=' + row.id).then((response) => {
          const res = response.data;
          if (res.code === 200) {
            this.handleSelect();
            this.$message({message: res.message, type: 'success'});
          }
        });
      },
      //编辑
      handleEdit(index, row) {
        this.responseData.form = row;
        this.updateDialogVisible = true;
      },

      //修改商品
      onSubmitUpdate() {

        this.axios({
          method: 'post',
          url: 'http://localhost:8080/goods/updateById',
          data: this.responseData.form
        }).then((response) => {
          const res = response.data;
          if (res.code === 200) {
            this.handleSelect();
            this.$message({message: res.message, type: 'success'});
          }
        });
        this.updateDialogVisible = false;
      },
    }
  }
</script>

<style scoped>

  .formInput {
    width: 150px;

  }
</style>
